<template>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                v-for="(item,k) in tableColumn"
                :key="k"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
        </el-table-column>
        <el-table-column
                v-for="(item) in myTable"
                :key="item.label"
                :label="item.label"
                :width="item.width"
        >
            <template slot-scope="scope">
                <el-input v-if="scope.row[item.label] === ''" style="width: 100%" @input="rua(scope)" v-model="scope.row[item.label]"></el-input>
            </template>
        </el-table-column>
        <el-table-column>
            <template slot-scope="scope">
                <el-button @click="add(scope.row)">add</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>


<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sx1: "sx1"
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          sx1: "sx1"
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          sx1: "sx1"
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          sx1: "sx1"
        }],
        tableColumn: [
          {label: "日期", prop: "date", width: 100},
          {label: "姓名", prop: "name", width: 100},
          {label: "地址", prop: "address", width: 100},
          {label: "sx1", prop: "sx1", width: 100}
        ],
        myTable:[],
        index: 0
      }
    },
    methods: {
      rua(){
        console.log(this.tableData)
      },
      add(rowData) {
        let arr = []
        for (let i in rowData) {
          arr.push(i)
        }
        let maxLength = this.myTable.length;//多少列
        if (arr.length-4 === maxLength) {
          this.index =  this.index+1
          this.myTable.push({label: "prop"+this.index, width: 150})
          rowData["prop"+this.index] = ''
        }else if (arr.length - 4 < maxLength) {
          rowData["prop"+(arr.length - 3)] = ''
        }
        this.tableData = [...this.tableData]
      }
    }
  }
</script>
